import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
import { Carousel, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import Footer from '../common/PageNotFound.js';
export class DefaultPage extends Component {
  static propTypes = {
    index: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
    
  };
state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
    slideIndex: 2,
  };
   componentDidMount() {
    // simulate img loading
    setTimeout(() => {
      this.setState({
        data: ['https://img02.hua.com/slider/19_zhongqiu_m.jpg', 'https://img02.hua.com/slider/18_birthday_m.jpg?830', 'https://img02.hua.com/slider/19_chunvzuo_m.jpg','https://img02.hua.com/slider/18_youflower_m.jpg?830'],
      });
    }, 100);
  }
  componentDidUpdate() {
    // After the new child element is rendered, change the slideIndex
    // https://github.com/FormidableLabs/nuka-carousel/issues/327
    if (this.state.slideIndex !== this.state.data.length - 1) {
      /* eslint react/no-did-update-set-state: 0 */
      this.setState({ slideIndex: this.state.data.length - 1 });
    }
  }
  render() {
    return (
      <div className="index-default-page">
        <div className="headerbar">
          <div className="headerbar-left">
            <a href="">
              <i className="iconfont icon-iconfontcategory fff"></i>
            </a>
          </div>
          <div className="headerbar-logo">
            <img src="https://m.hua.com/content/vue/login/static/img/m_hualogo.png"></img>
          </div>
          <div className="headerbar-right" id="onlineChat">
            <div className="headerbar-right-kf active">
              <p className="iconfont icon-erji"></p>
            </div>


          </div>
        </div>
        
        <Carousel
          autoplay={true}
          infinite
          selectedIndex={this.state.slideIndex}
          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          afterChange={index => console.log('slide to', index)}
        >
          {this.state.data.map((val, index) => (
            <a
              key={val + index}
              href=""
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={`${val}`}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
        <div className="goods-top">送恋人/爱情鲜花</div>
        <div className="goods-items">
          <div className="goods">
                        <a href="" className="navigation">
                            <div className="goods-pic"><img src="https://img01.hua.com/uploadpic/newpic/9010966.jpg_220x240.jpg" alt="一往情深"/></div>
                            <div className="goods-info">
                                <p className="goods-overflow">一往情深</p>
                                <p className="goods-info-desc text-overflow-line2 ">精品玫瑰礼盒:19枝红玫瑰，勿忘我0.1扎</p>
                                <div className="goods-info-promo">经典爆款，年销售冠军！</div>
                                <div className="goods-info-bottom">
                                    <div className="goods-info-bottom-left">
                                        <p className="goods-info-prices" data-id="9010966" style={{opacity: 1}}><strong>¥239</strong><s>¥315</s></p>
                                        <p className="goods-info-sales">已销售7.3万件</p>
                                    </div>
                                    <div className="goods-info-bottom-right" data-id="9010966"><i class="iconfont icon-shop-cart-o"></i></div>
                                </div>
                            </div>
                        </a>  
          </div>
        </div>
        <Footer></Footer>
      </div>
    );
  }
}

/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    index: state.index,
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DefaultPage);
